import * as React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import screen from '../utils/screen';
import Images from '../images/images';
import TouchableView from './touchableView';
import {useNavigation} from '@react-navigation/native';


const SatListItem  = ({data})=>{

    const navigation = useNavigation()
    const {elevation,azimuth,startTime,restMinutes,name,clockwise} = data;

    const isOnline = elevation > 0

    return (
        <View
            style={styles.container}
        >
            <View style={{}}>

                <Text style={{color:'#333'}}>{isOnline ? '过境中...' : `${startTime}后过境` }</Text>
                <Text style={{color:'#333'}}>卫星:{name} </Text>
            </View>

            <TouchableView
                style={styles.btnWrap}
                onPress={()=>{
                    navigation.navigate('Compass',{data})
                }}
            >
                <Text style={{fontSize:12}}>详情</Text>
            </TouchableView>





        </View>
    )
}

export default SatListItem

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#fff',borderRadius:screen.PIXEL_20,
        padding:screen.PIXEL_30,marginBottom:screen.PIXEL_30,flexDirection:'row',
        justifyContent:'space-between',alignItems: 'center'
    },
    btnWrap:{
        width:screen.PIXEL_100,height:screen.PIXEL_40,borderWidth: 0.3,borderColor: '#333',
        justifyContent: 'center',alignItems: 'center'
    },

})
